<template>
	<view class="specialOffer-wrapper colCen wrapperLayer">
		<view class="topbarbox"></view>
		<view class="fixed-content colCen">
			<view class="barbac"></view>
			<view class="topbarbox"></view>
			<view class="headerBar-container colCen">
				<view class="borderBox rowCenBet headerbox">
					<view class="leftbackicon defIcon" @tap="goback()">
						<image src="@/static/images/home/return.png" mode=""></image>
					</view>
					<view class="titleBox rowCen">
						<view class="titleText">
							推广联盟
						</view>
					</view>
					<view class="rightEmpty">
					</view>
				</view>
			</view>
		</view>
		<view class="shoplist-container colCen">
			<view class="tips-box">
				<view class="title">使用步骤</view>
				<view class="contnet">
					<view>可以直接点击复制链接分享到朋友圈、社群等</view>
					<view>专属链接中已经包含您的信息</view>
				<!-- 	<view>其他人通过您分享的单页下单,订单佣金会自动计入到您的账户中</view> -->
					<view>如遇域名被封风险,联系平台管理员，会尽快修复，或等 待24小时后重新生成</view>
				</view>
				<view class="tips-text">
					tips：邀请好友进行分销,您还可以拿到佣金奖励哦~
				</view>
			</view>
			<block v-for="(items,index) in  singlePageList" :key='index'>
				<view class="prod-card">
					<view class="card-top">
						<view class="img-box">
							<image class="card-img" :src="items.image" mode=""></image>
						</view>
						<view class="top-right">
							<view class="card-title">{{items.title}}</view>
							<view class="card-introduction">{{items.content}}</view>
							<view class="card-time">{{items.promotionPeriod}}</view>
						</view>
					</view>
					<view class="card-botton">
						<view>
							<view class="promotion-quantity">{{items.tgPeople}}人已推广</view>
						</view>
						<view class="botton-right">
							<view class="preview" v-on:click="previewHtml(items)">预览</view>
							<view class="copy-url" v-on:click="copyContent(items)">复制链接</view>
						</view>
					</view>
				</view>
			</block>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTop: 0,
				nowCurrent: 0,
				scrollTop: 0,
				navList: [],

				fiexdHeight: '',
				fiexdtop: '',
				singlePageList: [],
				pageCurrent: 0,
				canloadmore: false,
				loadstatus: 'loading'
			}
		},
		onLoad() {
			this.getData()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.canloadmore) {
				this.getData()
			}
		},
		mounted() {

		},
		methods: {
			getData() {
				this.$http.post('singlePage/getSinglePage', {
					
					offset: this.pageCurrent,
					limit: 10,
					type: 2
				}, 'application/json').then(res => {
					uni.stopPullDownRefresh();
					console.log("返回参数"+JSON.stringify(res));
					if (res.length < 10) {
						this.pageCurrent += 10
						this.canloadmore = false
						this.loadstatus = 'nomarl'
					} else {
						this.canloadmore = true
						this.loadstatus = 'loading'
						this.pageCurrent += 10
					}
					this.singlePageList = this.singlePageList.concat(res)
				})
			},


			previewHtml(items) {
				console.log("========================= ======="+items.id);
				this.$http.get('singlePage/getPrivilegeLink', {
					id: items.id
				}).then(res => {
					console.log("推广联盟"+ res.url);
					uni.navigateTo({
						url: '../webView/webView?url=' + res.url
					})
				}).catch(res=>{
					console.log(res);
					uni.showToast({
						title: res,
						icon: 'none',
						position: 'bottom',
						duration: 3000
					});
				})
			},

			copyContent(items){
				
				this.$http.get('singlePage/getPrivilegeLink', {
					id: items.id
				}).then(res => {
					uni.setClipboardData({
					    data: res.content+decodeURIComponent(res.url),
					    success: (r => {
					      
					    }),
					})
				}).catch(res=>{
					console.log(res);
					uni.showToast({
						title: res,
						icon: 'none',
						position: 'bottom',
						duration: 3000
					});
				})
				
			
				
				//uni.setStorageSync('clipboard',this.pageInfo.desc)
				
			},
			goback() {
				uni.navigateBack({
					delta: 1
				})
			}

		},
		onPullDownRefresh() {
			this.pageCurrent = 0;
			this.canloadmore = false;
			this.singlePageList = [];
			this.loadstatus = 'loading';
			this.getData()
		},
		goback() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
</script>

<style lang="scss">
	
	.specialOffer-wrapper {
		width: 100%;
		min-height: 380rpx;
		position: relative;

		.topbac-content {
			width: 100%;
			height: 380rpx;
			position: absolute;

			.colorContent {
				width: 100%;
				height: 380rpx;
			}
		}

		.fixed-content {
			width: 100%;
			overflow: hidden;
			position: fixed;
			z-index: 100;

			.barbac {
				width: 100%;
				height: 380rpx;
				background-color: #fff;
				color: #333333;
				// background: linear-gradient(266deg, #7D0DFC, #D116FD);
				background-size: 100% 100%;
				position: absolute;
				pointer-events: none;
				top: 0;
				left: 0;
			}

			.headerBar-container {
				width: 100%;
				height: 90rpx;
				z-index: 100;

				.headerbox {
					width: 100%;
					height: 90rpx;
					padding: 0 32rpx;

					.leftbackicon {
						width: 32rpx;
						height: 32rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						image {
							width: 17rpx;
							height: 32rpx;
						}
					}

					.titleBox {
						.titleIcon {
							width: 46rpx;
							height: 37rpx;
						}

						.titleText {
							font-size: 32rpx;
							font-weight: 500;
							// color: #FFFFFF;
							color: #333333;
							margin-left: 15rpx;
							z-index: 101;
						}
					}

					.rightEmpty {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.rangeList-container {
				width: 100%;
				height: 90rpx;
				padding: 0 32rpx;
				z-index: 101;

				.scrollview-content {
					width: 100%;
					height: 100%;
					white-space: nowrap;
					vertical-align: center;

					.rangeItem {
						display: inline-flex;
						margin-right: 45rpx;
						margin-top: 15rpx;

						.nameBox {
							font-size: 30rpx;
							font-weight: 500;
							color: #FFFFFF;
						}

						.border {
							width: 60%;
							height: 1rpx;
							background: transparent;
						}
					}

					.rangeItem-active {
						.nameBox {
							font-size: 32rpx;
						}

						.border {
							background: #FFFFFF;
							margin-top: 8rpx;
						}
					}
				}
			}
		}

		.shoplist-container {
			z-index: 1;
			width: 100%;
			margin-top: 120rpx;
			padding: 0 32rpx;
			.tips-box{
				width: 100%;
				height: 420rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				.title{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					padding-top: 28rpx;
					text-overflow:ellipsis;
					overflow:hidden;
					white-space:nowrap;
				}
				.contnet{
					width: 655rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					padding-top: 35rpx;
				}
				.tips-text{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF3824;
					line-height: 34rpx;
					padding-top: 30rpx;
				}
			}
			.prod-card{
				display: flex;
				flex-direction: column;
				width: 710rpx;
				height: 369rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				.card-top{
					display: flex;
					.img-box{
						width: 300rpx;
						height: 240rpx;
						background: #E5E5E5;
						border-radius: 10rpx;
						.card-img{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					.top-right{
						padding-left: 20rpx;
					}
					.card-title{
						width: 340rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 34rpx;
						text-overflow:ellipsis;
						overflow:hidden;
						white-space:nowrap;
					}
					.card-introduction{
						width: 377rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FE7804;
						line-height: 34rpx;
						padding-top: 34rpx;
						overflow: hidden;
						text-overflow: ellipsis; 
						display: -webkit-box;
						-webkit-line-clamp: 2; // 设置两行文字溢出
						-webkit-box-orient: vertical;
						overflow:hidden;
						text-overflow:ellipsis;
					}
					.card-time{
						width: 262rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 34rpx;
						padding-top: 30rpx;
						
					}
				}
				.card-botton{
					display: flex;
					padding-top: 34rpx;
					align-items: center;
					justify-content: space-between;
					.promotion-quantity{
						display: flex;
						align-items: center;
						justify-content: center;
						min-width: 176rpx;
						height: 44rpx;
						padding: 12rpx;
						font-size: 24rpx;
						background: #FEEFE8;
						color: #FE7804;
						border-radius: 6rpx;
					}
					.botton-right{
						display:flex;
						.preview{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 140rpx;
							height: 60rpx;
							background-color: #FEEFE8;
							border: 1rpx solid #FE7804;
							border-radius: 30px;
							font-weight: 500;
							color: #FE7804;
							
						}
						.copy-url{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 178rpx;
							height: 60rpx;
							background: linear-gradient(-90deg, #FD5703, #FE7F04);
							border-radius: 30rpx;
							font-weight: 500;
							color: #FFFFFF;
							margin-left: 30rpx;
							
						}
					}
					
				}
			}
		}
	}
</style>
